<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas画钟</title>
    <style>
      html,
      body,
      .container{
        height: 100%;
        width: 100%;
       }
       .container{
       display: flex;
       justify-content: center;
       align-items: center;
       }
        canvas{
            border: 1px solid rgb(19, 18, 18);
        }
       
    </style>
    <script></script>
</head>
<body>

<div class="container">
    <canvas id="demo3" width="600px" height="600px"></canvas>
</div>
<script  type="text/javascript">
//获取元素dom
let demo2=document.querySelector('#demo3')
//指定画布是2d形式
let ctx= demo3.getContext('2d')
ctx.save();
// ---------------------------------------------------------------------------------网格背景
//创建网格线
function drawGrid(ctx,stepX, stepY, color, lineWidth){
        ctx.save()
    // // 设置绘制颜色
       ctx.strokeStyle = color;
       // 创建垂直格网线路径
       for(let i = stepX; i < demo2.width; i += stepX){
         // 设置绘制线段的宽度
       ctx.lineWidth = lineWidth;
       //开启路径
       ctx.beginPath()
       
       //笔触的位置-moveTo经常是画一些不连续的线
       ctx.moveTo(i, 0);
       //绘制一条从当前位置到指定x以及y位置的直线。
        ctx.lineTo(i,demo2.height);
       ctx.stroke()
       }
       // 创建水平格网线路径
       for(let j = stepY; j < demo2.height; j += stepY){
           // 设置绘制线段的宽度
       ctx.lineWidth = lineWidth;
           //开启路径
           ctx.beginPath()
           ctx.moveTo(0, j);
           ctx.lineTo(demo2.width, j);
           ctx.stroke()
       }
        ctx.restore()
   }

// ----------------------------------------------------表盘大圆

function bigclock() {  
    ctx.save()
    ctx.beginPath()
    // 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度)
    ctx.arc(0, 0, 200, 0, 2 * Math.PI)
    ctx.stroke() //画轮廓
    ctx.closePath()
    ctx.restore()
}
  
// -------------------------------------------------------画表心
function clockcenter(){
    ctx.save()
    ctx.beginPath()
    // 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度) Math.PI=3.14=180度
    ctx.arc(0, 0, 5, 0, 2 * Math.PI)
    ctx.fill()
    ctx.closePath()
    ctx.restore()
}

// -------------------------------------------------画时针
function drawHour(hour,minutes){
    ctx.save()
    ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (minutes / 60) )
    ctx.beginPath()
    ctx.moveTo(-1,0);
    ctx.lineTo(-10,-80);
    ctx.lineTo(0,-85);
    ctx.lineTo(10,-80);
    ctx.lineTo(1,0);
    // 设置线宽
    ctx.lineWidth = 1
    ctx.fillStyle="pink"
    ctx.fill() //画轮廓
    ctx.closePath()
    ctx.restore()
}

// --------------------------------------------------画分针
function drawMinu(minutes,seconds){
    ctx.save()
    ctx.rotate(2 * Math.PI / 60 * minutes + 2 * Math.PI / 60 * (seconds / 60) )
    ctx.beginPath()
    ctx.moveTo(-1,0);
    ctx.lineTo(-6,-140);
    ctx.lineTo(0,-145);
    ctx.lineTo(8,-140);
    ctx.lineTo(1,0);
    // 设置线宽
    ctx.lineWidth = 1
    ctx.fillStyle="red"
    ctx.fill() //画轮廓
    ctx.closePath()
    ctx.restore()
}

//---------------------------------------------------画秒针
function drawSecond(seconds) { 
    ctx.save()
    ctx.rotate(2 * Math.PI / 60 * seconds)
    ctx.beginPath()
    ctx.moveTo(-1,0);
    ctx.lineTo(-4,-170);
    ctx.lineTo(0,-175);
    ctx.lineTo(5,-170);
    ctx.lineTo(1,0);
    // 设置线宽
    ctx.lineWidth = 1
    ctx.fillStyle="blue"
    ctx.fill() //画轮廓
    ctx.closePath()
    ctx.restore()
    
 }

// -------------------------------------------------画小时的刻度
function hourkedu(){
    ctx.save()
    ctx.lineWidth = 5
    for (let i = 0; i < 60; i++) {
    ctx.rotate(2 * Math.PI / 12)
    ctx.beginPath()
    ctx.moveTo(193, 0)
    ctx.lineTo(200, 0)
    ctx.stroke()
    ctx.closePath()
    }
    ctx.restore()
}

// -------------------------------------------------画分针的刻度
function minukedu() {
    ctx.save()
    ctx.lineWidth = 2
    for (let i = 0; i < 60; i++) {
    ctx.rotate(2 * Math.PI / 60)
    ctx.beginPath()
    ctx.moveTo(195, 0)
    ctx.lineTo(200, 0)
    ctx.stroke()
    ctx.closePath()
    }
    ctx.restore()
  }

//  让表动起来
    setInterval(()=>{
    // -------------------------------------------------------获取当前时间
    let time = new Date()
    let hour = time.getHours() % 12//对当前时间取余 比如现在时间16点 对应的就是4点
    let minutes = time.getMinutes()
    let seconds = time.getSeconds()
    // 清除画布
    ctx.save()
    ctx.clearRect(0, 0, 600, 600)
    drawGrid(ctx,20, 20, '#ccc', 0.5);
    //找到画布的中心点
    ctx.translate(300,300)
    // 大表盘
    bigclock()
    // 画表心
    clockcenter()
    hourkedu()
    minukedu()

    drawHour(hour,minutes)
    drawMinu(minutes,seconds)
    drawSecond(seconds)
    ctx.restore() 
    },1000)
    </script>
</body>
</html>